<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            .box {
                height: 50px;
            }

            .box>div {
                line-height: 50px;
                height: 100%;
                float: left;
                border: 2px solid blue;
                padding: 5px 20px;
                position: relative;
            }

            .item:hover {
                border-color: black;
                z-index: 1;
            }

            .n2 {
                right: 2px;
            }

            .n3 {
                right: 4px;
            }
            
            .n4 {
                right: 6px;
            }

            .n5 {
                right: 8px;
            }
        </style>

    </head>
    <body>

        <div class="box">
            <div class="item n1">苹果</div>
            <div class="item n2">香蕉</div>
            <div class="item n3">栗子</div>
            <div class="item n4">大西瓜</div>
            <div class="item n5">大芒果</div>
        </div>
        
    </body>
</html>